<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
    .layui-input-inline {
        width: 400px !important;
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row">
                <div class="layui-col-md12" style="text-align: center;font-size: 20px;margin-bottom: 20px">选择工种</div>
                <div class="layui-col-md12">
                    <form class="layui-form " action="">
                        <div class="layui-form-item">

                            <div style="float: left" class="layui-col-md5">
                                <label class="layui-form-label">工种</label>
                                <div class="layui-input-block">
                                    <select name="" id="type">
                                        <option value="">请选择一个工种</option>
                                        <option value="拆除工">拆除工</option>
                                        <option value="地板工">地板工</option>
                                        <option value="水电工">水电工</option>
                                        <option value="找平工">找平工</option>
                                        <option value="安装工">安装工</option>
                                        <option value="保洁工">保洁工</option>
                                        <option value="木工">木工</option>
                                        <option value="瓦工">瓦工</option>
                                        <option value="吊顶工">吊顶工</option>
                                        <option value="壁纸工">壁纸工</option>
                                        <option value="辅助工">辅助工</option>
                                        <option value="维修工">维修工</option>
                                        <option value="木作工">木作工</option>
                                        <option value="台面工">台面工</option>
                                        <option value="油工">油工</option>
                                        <option value="壁布工">壁布工</option>
                                </select>
                                </div>
                            </div>
                            <div style="float:left;margin-left: -4.5%" class="layui-col-md5">
                                <label class="layui-form-label">工价</label>
                                <div class="layui-input-block">
                                    <input type="text" name="" value="" class="layui-input" id="price"
                                           placeholder="￥" >
                                </div>
                            </div>
                            <div style="float:left;margin-left: 3%" class="layui-col-md2">
                                <button type="button" class="layui-btn" onclick="add()">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                            </div>

                        </div>
                        <div class="layui-form-item" v-for="(item,index) in items">

                            <div style="float: left" class="layui-col-md5">
                                <label class="layui-form-label">工种</label>
                                <div class="layui-input-block">
                                    <input type="text" name="" :value="item.type" class="layui-input" disabled style="width: 116%;" >

                                </div>
                            </div>
                            <div style="float:left;margin-left: -1%" class="layui-col-md5">
                                <label class="layui-form-label">工价</label>
                                <div class="layui-input-block">
                                    <input type="text" name="" :value="item.pricet" class="layui-input" disabled>

                                </div>
                            </div>
                            <div style="float:left;margin-left: 3%" class="layui-col-md2">
                                <button type="button" class="layui-btn" @click="del(index)">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div  style="text-align: center;position: fixed;bottom: 0px;background-color: #ffffff;width: 100%"  >
                    <button class="layui-btn " onclick="sure()" style="width: 10%;margin: 10px">
                        发布
                    </button>
                    <button class="layui-btn layui-bg-gray" onclick="cancel()" style="width: 10%;margin: 10px">
                        取消
                    </button>
                </div>
            </div>


        </div>

    </div>


</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [],
        },
        methods: {
            del: function (index) {
                this. items.splice(index, 1);
            },

        },
    });
    $(function () {
        var s = "";
        if ('{$s}') {
            s = '{$s}';
            var str = eval('(' + s + ')');
            app.items=str;
        }

    });
    function add(){
        var e = createObj($("#type").val(),$("#price").val());
        app.items.push(e);
        $('.layui-form')[0].reset();
    }
    function createObj(type,price){
        var o = {
            type : type,
            pricet : price,
        };
        return o;
    }

    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
    });
    function sure() {
        $.post("{:url('worker_type')}",{data:app.items,id:"{$Request.param.id}"},function (res) {
            if (res.code == 1) {
                parent.layer.closeAll();
                parent.layer.msg(res.msg, {icon: 1});
                return false;
            } else {
                layer.msg(res.msg, {icon: 2}, function () {
                });
                return false;
            }

        });

    }
    function cancel() {
        parent.layer.closeAll();
    }
</script>

</body>
</html>